<template>
    <view class="mainContent">
        <view style="padding: 10rpx 20rpx">
            <view class="Title">订单统计</view>

            <!--日订单和月订单 tab-->
            <c-myTabs @tabChange="onTabChange" @selectDate="onSelectDateClick" :dateTxt="selectDateTxt"></c-myTabs>
        </view>

        <view v-if="curTab == 0">
            <!--订单数量和里程 tab-->
            <c-optionTabs :tabList="tabList" @tabClick="onOptionTabClick"></c-optionTabs>

            <!--日订单列表-->
            <view class="dayOrderList">
                <view class="dayOrderItem" v-for="(item, index) in dayDataList" :key="index"
                      @click="onDayOrderItemClick(item)">
                    <view class="dayOrderItemTitle">
                        <view>
                            <text class="status">{{ item.status }}</text>
                            <text class="sendTime">送达时间：{{ item.predictTime }}</text>
                        </view>
                        <!-- riderDo 骑手状态 0:帮我送 1:帮我买 2:帮我取   orderTyp 0外卖 1跑腿-->
                        <text class="status" v-if="item.orderType == 1">
                            {{ item.riderDo == 0 ? '帮我送' : item.riderDo == 1 ? '帮我买' : '帮我取' }}
                        </text>
                    </view>

                    <view class="merLayout" v-if="!item.sfBuy">
                        <view>取</view>
                        <view>{{ item.pickAddress }}</view>
                    </view>
                    <view class="merLayout" v-else>
                        <view>买</view>
                        <view>就近购买仅支持1公里内产品</view>
                    </view>

                    <view class="addressLayout">
                        <view>收</view>
                        <view>{{ item.receiveAddress }}</view>
                    </view>

                    <view class="remarks">备注：{{ item.remark }}</view>

                    <!--                    <view class="phoneLayout">-->
                    <!--                        <view>手机号码：{{ item.phone }}</view>-->
                    <!--                        <image class="phone"-->
                    <!--                               src="../../static/images/pulice/phone_icon_cc.png"></image>-->
                    <!--                    </view>-->

                    <view class="mileage">订单里程：{{ item.distance }}km</view>

                    <view class="orderNo">订单编号：{{ item.orderSn }}</view>
                </view>
            </view>
        </view>

        <!--月订单列表-->
        <view class="monthOrderList" v-else>
            <view class="monthOrderItem" v-for="(item,index) in monthDataList" :key="index">
                <view class="dateLayout">
                    <text>{{ item.mouth }}</text>
                    <text>{{ item.mouthStartTime }} 至 {{ item.mouthEndTime }}</text>
                </view>

                <view class="monthDetailsList">
                    <view v-for="(subItem,index) in item.monthTabList" :key="index">
                        <view class="detailsTitle">{{ subItem.title }}</view>
                        <view class="detailsContent">
                            <text>{{ subItem.value }}</text>
                            <text v-if="index != 3">单</text>
                            <text v-else>km</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!--日历 选择日期-->
        <u-datetime-picker
            ref="datetimePicker"
            color="#f56c6c"
            :show="showDatePicker"
            v-model="dateValue"
            mode="date"
            :formatter="formatter"
            @close="showDatePicker = false"
            @confirm="onDateConfirm"
            @cancel="showDatePicker = false">
        </u-datetime-picker>
    </view>

</template>

<script setup lang="ts">

import {getCurrentInstance, ref} from "vue";
import {monthOrderStatistics, todayOrderStatistics} from "@/utlis/interface/Wode";
import {onLoad, onReady} from "@dcloudio/uni-app";
import {forDate, formateDate} from "@/utlis/time";
import {NavTo} from "@/utlis/uni_api";

const {proxy} = getCurrentInstance() as any

let tabList: any = ref([])
let dayDataList: any = ref([])
let monthDataList: any = ref([])

let curTab = ref(0)
let selectDateTxt = ref("")
let dateValue = ref("")
let orderType = ref("")
const showDatePicker = ref(false)
let todayTxt = "今日订单"

onReady(() => {
    proxy.$refs.datetimePicker.setFormatter(formatter)
})

onLoad((options) => {
    dateValue.value = formateDate(new Date())
    selectDateTxt.value = todayTxt
    // selectDateTxt.value = formateDate(new Date())
    getDayOrderStatistics()
})

/**
 * 日期选择
 */
function onSelectDateClick() {
    showDatePicker.value = true
}

/**
 * 日订单 和 月订单 tab切换
 */
function onTabChange(index: number) {
    curTab.value = index
    switch (index) {
        case 0:
            getDayOrderStatistics()
            break;
        case 1:
            getMonthOrderStatistics()
            break;
    }
}

/**
 * 订单tab点击
 */
function onOptionTabClick(val: any) {
    // 订单类型 默认空字符串 0 外卖 1 跑腿
    switch (val.index) {
        case 0:
            orderType.value = ""
            break;
        case 1:
            orderType.value = "0"
            break;
        case 2:
            orderType.value = "1"
            break;
    }
    if (val.index != 3) {
        getDayOrderStatistics()
    }
}

/**
 * 日订单条目点击
 * @param item
 */
function onDayOrderItemClick(item: any) {
    NavTo(`/pages/Order/OrderDeatil?&Type=${item.orderType}&orderType=4&id=${item.id}`)
}

/**
 * 日期选择
 */
function onDateConfirm(val: any) {
    showDatePicker.value = false
    if (formateDate(new Date()) == formateDate(val.value)) {
        selectDateTxt.value = todayTxt
    } else {
        selectDateTxt.value = formateDate(val.value)
    }
    getDayOrderStatistics()
}

function formatter(type: any, value: any) {
    if (type === 'year') {
        return `${value}年`
    }
    if (type === 'month') {
        return `${value}月`
    }
    if (type === 'day') {
        return `${value}日`
    }
    return value
}

/**
 * 查询日订单
 */
function getDayOrderStatistics() {
    let params = {
        "orderType": orderType.value,
        "time": selectDateTxt.value == todayTxt ? formateDate(new Date()) : selectDateTxt.value,
    }

    todayOrderStatistics(params, proxy).then((res: any) => {
        let riderCompleteVo = res.data.riderCompleteVo
        let datas = res.data.riderStatisticsDetailVO

        tabList.value = [
            {
                title: "完成订单",
                value: riderCompleteVo.completeCount
            },
            {
                title: "外卖订单",
                value: riderCompleteVo.takeawayCount
            },
            {
                title: "跑腿订单",
                value: riderCompleteVo.runCount
            },
            {
                title: "配送里程",
                value: riderCompleteVo.distanceCount
            }
        ] as any[]

        // 订单状态:-2 = 交易关闭,-1=已取消,0=未支付,1=已支付,2=已完成,3=退款申请,4=退款中,5=已退款
        for (let i = 0; i < datas.length; i++) {
            switch (datas[i].status) {
                case -2:
                    datas[i].status = "交易关闭"
                    break;
                case -1:
                    datas[i].status = "已取消"
                    break;
                case 0:
                    datas[i].status = "未支付"
                    break;
                case 1:
                    datas[i].status = "已支付"
                    break;
                case 2:
                    datas[i].status = "已完成"
                    break;
                case 3:
                    datas[i].status = "退款申请"
                    break
                case 4:
                    datas[i].status = "退款中"
                    break
                case 5:
                    datas[i].status = "已退款"
                    break
            }
        }
        dayDataList.value = datas
    })
}

/**
 * 查询月订单
 */
function getMonthOrderStatistics() {
    monthOrderStatistics({}, proxy).then((res: any) => {
        let listRes = res.data.listVo
        for (let i = 0; i < listRes.length; i++) {
            let monthTabList = [
                {
                    title: "完成订单",
                    value: listRes[i].completeCount
                },
                {
                    title: "外卖订单",
                    value: listRes[i].takeawayCount
                },
                {
                    title: "跑腿订单",
                    value: listRes[i].runCount
                },
                {
                    title: "配送里程",
                    value: listRes[i].distanceCount
                }
            ]
            listRes[i].monthTabList = monthTabList
        }
        monthDataList.value = listRes
    })
}
</script>

<style scoped lang="scss">
page {
    background: #F6F6F6;
}

.mainContent {
    width: 100%;
    padding: 0 30rpx 30rpx;
    font-weight: bold;
    box-sizing: border-box;
    //background-color: aqua;
    background-color: #F6F6F6;
}

.Title {
    font-weight: bold;
    font-size: 50rpx;
    color: #333333;
    line-height: 70rpx;
}

.dayOrderList {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 0 20rpx;
}

.dayOrderItem {
    background: #FFFFFF;
    padding: 20rpx;
    border-radius: 10rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
}

.dayOrderItemTitle {
    display: flex;
    justify-content: space-between;
}

.status {
    font-weight: bold;
    font-size: 26rpx;
    color: #333333;
}

.sendTime {
    margin-left: 20rpx;
    font-weight: 400;
    font-size: 20rpx;
    color: #AAAAAA;
}

.amount > text:nth-child(1) {
    font-weight: 400;
    font-size: 20rpx;
    color: #FF1B1B;
}

.amount > text:nth-child(2) {
    font-weight: 400;
    font-size: 36rpx;
    color: #FF1B1B;
}

.merLayout {
    display: flex;
    align-items: center;
    margin-top: 36rpx;
}


.merLayout > view:nth-child(1) {
    font-weight: 400;
    font-size: 26rpx;
    color: #FFFFFF;
    background: #FF0000;
    padding: 8rpx 10rpx 6rpx;
    border-radius: 50%;
    margin-right: 54rpx;
}

.merLayout > view:nth-child(2) {
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
}

.addressLayout {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
}

.addressLayout > view:nth-child(1) {
    font-weight: 400;
    font-size: 26rpx;
    color: #FFFFFF;
    background: #F4D421;
    padding: 8rpx 10rpx 6rpx;
    border-radius: 50%;
    margin-right: 54rpx;
}

.addressLayout > view:nth-child(2) {
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
}

.remarks {
    margin-top: 20rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #AAAAAA;
}

.mileage, .orderNo, .phoneLayout {
    font-weight: 400;
    font-size: 24rpx;
    color: #333333;
    margin-top: 10rpx;
}

.phoneLayout {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
}

.phone {
    width: 25rpx;
    height: 25rpx;
    transform: rotateY(180deg);
    margin-left: 20rpx;
}

.monthOrderList {
    //background: aquamarine;
    padding: 20rpx 0;
}

.monthOrderItem {
    margin-bottom: 65rpx;
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 15rpx;
    border-radius: 10rpx;
}

.dateLayout {

}

.dateLayout > text:nth-child(1) {
    font-weight: bold;
    font-size: 28rpx;
    color: #3D3D3D;
}

.dateLayout > text:nth-child(2) {
    font-weight: 400;
    font-size: 24rpx;
    color: #777777;
    margin-left: 10rpx;
}

.monthDetailsList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
}

.detailsTitle {
    font-weight: 400;
    font-size: 26rpx;
    color: #777777;
}

.detailsContent {
    margin-top: 10rpx;
}

.detailsContent > text:nth-child(1) {
    font-weight: bold;
    font-size: 50rpx;
    color: #3D3D3D;
}

.detailsContent > text:nth-child(2) {
    margin-left: 1rpx;
    font-weight: bold;
    font-size: 30rpx;
    color: #3D3D3D;
}
</style>